<template>
  <div class="editTableExpand" ref="editTableBox">
    <div class="edit-table-toolbar">
      <div class="edit-table-toolbar__title">{{ title }}</div>
      <div class="edit-btn" v-if="!hideBtn">
        <slot name="btnsBefore"></slot>
        <template v-for="(i, index) in btnConfig">
          <el-button
            size="mini"
            :key="index"
            v-if="showBtn(i.name)"
            :type="i.type"
            :icon="i.icon"
            @click="i.methons"
          >{{ i.text }}</el-button>
        </template>
        <slot name="btnsAfter"></slot>
      </div>
    </div>
    <div class="edit-table-content">
      <el-form ref="formTable" :model="tableConfig" :rules="rules" label-width="5px">
        <!--   -->
        <el-table
          :data="tableConfig.data"
          border
          stripe
          highlight-current-row
          ref="editTable"
          :header-cell-style="headerStyle"
          :height="tableConfig.height"
          :max-height="tableConfig.maxHeight"
          :row-key="rowKey"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column type="index" label="序号" v-if="!showOrder"></el-table-column>
          <template v-for="(item, index) in tableConfig.column">
            <el-table-column
              v-if="!item.isHide"
              :label="item.label"
              :width="item.width"
              align="center"
              :min-width="item.minWidth"
              :prop="item.prop"
              :key="index"
              class="tableColumn"
            >
              <template slot-scope="scope">
                <el-form-item :prop="'data.' + scope.column.property" :rules="rules[item.prop]">
                  <!-- 自定义插槽 -->
                  <slot :name="item.prop" :item="item" :editFormInfo="scope.row">
                    <template v-if="scope.row.editable">
                      <el-select
                        v-model="scope.row[scope.column.property]"
                        v-if="item.type === 'select'"
                        :multiple="item.multiple"
                        :disabled="item.disabled"
                        @change="
                        (val) =>
                          changeSelete(
                            val,
                            item,
                            scope.row
                          )
                      "
                        size="mini"
                        class="w100"
                      >
                        <template v-for="item_s in item.seleteOption">
                          <el-option
                            v-if="
                            typeof scope.row[scope.column.property] == 'string'
                          "
                            :key="item_s.value"
                            :label="item_s.label"
                            :disabled="
                            item.hasOwnProperty('disabledOp') &&
                            item.disabledOp(item_s.value, tableConfig.data)
                          "
                            :value="'' + item_s.value"
                          ></el-option>
                          <el-option
                            v-else-if="
                            typeof scope.row[scope.column.property] == 'number'
                          "
                            :key="item_s.value"
                            :label="item_s.label"
                            :disabled="
                            item.hasOwnProperty('disabledOp') &&
                            item.disabledOp(item_s.value, tableConfig.data)
                          "
                            :value="
                            ('' + item_s.value).trim() == ''
                              ? ''
                              : parseInt(item_s.value)
                          "
                          ></el-option>
                          <el-option
                            v-else
                            :key="item_s.value"
                            :label="item_s.label"
                            :disabled="
                            item.hasOwnProperty('disabledOp') &&
                            item.disabledOp(item_s.value, tableConfig.data)
                          "
                            :value="item_s.value"
                          ></el-option>
                        </template>
                      </el-select>
                      <el-date-picker
                        v-else-if="
                        [
                          'date',
                          'week',
                          'month',
                          'week',
                          'year',
                          'datetime',
                          'daterange',
                          'datetimerange',
                        ].includes(item.type)
                      "
                        v-model="scope.row[scope.column.property]"
                        :title="scope.row[scope.column.property]"
                        class="w100"
                        :type="item.type"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :disabled="item.disabled"
                        :format="dateFrm(item.type)"
                        :value-format="dateFrm(item.type)"
                        @change="val=>inputChange(val,item,scope.row)"
                        size="mini"
                        placeholder="选择日期"
                      ></el-date-picker>
                      <!-- 选择人员、组织 -->
                      <el-input
                        v-else-if="
                        [
                          'user',
                          'user-realNameMember',
                          'user-pdMember',
                          'dept',
                          'dept-orgAuth',
                          'dept-pdOrg',
                          'location',
                        ].includes(item.type)
                      "
                        size="mini"
                        @change="(val) => inputChange(val, item)"
                        :fetch-suggestions="querySearchAsync(item)"
                        v-model="scope.row[scope.column.property]"
                        :title="scope.row[scope.column.property]"
                        :placeholder="item.placeholder || '请选择'"
                        :disabled="item.disabled"
                        readonly
                      >
                        <el-button
                          slot="append"
                          :icon="
                          ['user', 'user-pdMember'].includes(item.type)
                            ? 'el-icon-user'
                            : 'el-icon-location'
                        "
                          :disabled="item.disabled || item.readonly"
                          @click="goSeleteOrgMember(scope.row, item, item.type)"
                        ></el-button>
                      </el-input>
                      <el-input
                        v-else-if="item.type === 'number'"
                        :key="scope.$index"
                        size="mini"
                        :readonly="item.readonly"
                        :disabled="item.disabled"
                        :type="item.type || ''"
                        @change="item.methods ? item.methods(scope.row) : ''"
                        v-model="scope.row[scope.column.property]"
                        :title="scope.row[scope.column.property]"
                        @wheel.native.prevent="stopScrollFun($event, item.type)"
                        class="w100"
                      ></el-input>
                      <!--设备分类-->
                      <el-input
                        v-else-if="item.type == 'deviceClassify'"
                        size="mini"
                        :title="scope.row[scope.column.property]"
                        v-model="scope.row[scope.column.property]"
                        :placeholder="item.placeholder || '请选择'"
                        readonly
                        :disabled="item.disabled"
                      >
                        <el-button
                          style="font-size: 16px"
                          slot="append"
                          icon="el-icon-setting"
                          :disabled="item.disabled"
                          @click="
                          goSeleteOrgMember(scope.row, item, 'deviceClassify')
                        "
                        ></el-button>
                      </el-input>
                      <!--选择设备-->
                      <el-input
                        v-else-if="item.type == 'device'"
                        size="mini"
                        :title="scope.row[scope.column.property]"
                        v-model="scope.row[scope.column.property]"
                        :placeholder="item.placeholder || '请选择'"
                        :disabled="item.disabled"
                        readonly
                      >
                        <el-button
                          style="font-size: 16px"
                          slot="append"
                          icon="el-icon-setting"
                          :disabled="item.disabled"
                          @click="goSeleteOrgMember(scope.row, item, 'device')"
                        ></el-button>
                      </el-input>
                      <el-input
                        v-else-if="item.type == 'click'"
                        :key="scope.$index"
                        size="mini"
                        :readonly="item.readonly"
                        :disabled="item.disabled"
                        v-model="scope.row[scope.column.property]"
                        :title="scope.row[scope.column.property]"
                      >
                        <el-button
                          style="font-size: 16px"
                          slot="append"
                          :icon="item.icon || ''"
                          :disabled="item.disabled"
                          @click="() => item.methods(scope.row, scope.$index)"
                        ></el-button>
                      </el-input>
                      <!-- 确认框 -->
                      <el-checkbox
                        v-model="scope.row[scope.column.property]"
                        v-else-if="item.type ==='checkbox'"
                        :true-label="1"
                        :false-label="0"
                        @change="item.methods ? item.methods(scope.row,item) : ''"
                        :disabled="item.disabled"
                      ></el-checkbox>
                      <!-- 纯文本 -->
                      <span
                        v-else-if="item.type ==='disableText'"
                      >{{scope.row[scope.column.property]}}</span>
                      <el-input
                        v-else
                        :key="scope.$index"
                        :autosize="item.autosize || false"
                        size="mini"
                        :readonly="item.readonly"
                        :disabled="item.disabled"
                        :type="item.type || ''"
                        :rows="item.rows || 1"
                        @change="
                        item.methods ? item.methods(scope.row, scope.$index) : ''
                      "
                        v-model="scope.row[scope.column.property]"
                        :title="scope.row[scope.column.property]"
                      ></el-input>
                    </template>
                    <template v-else>
                      <el-tooltip
                        effect="dark"
                        v-if="item.showTooltip"
                        placement="top"
                        :content="
                        item.formatter
                          ? item.formatter(
                              scope.row[scope.column.property],
                              scope.row
                            )
                          : item.text
                          ? formatterNull(scope.row[item.text])
                          : formatterNull(scope.row[scope.column.property])
                      "
                      >
                        <span
                          class="table-cloumn__span--tooltip w100"
                          style="display: inline-block"
                        >
                          {{
                          item.formatter
                          ? item.formatter(
                          scope.row[scope.column.property],
                          scope.row
                          )
                          : item.text
                          ? formatterNull(scope.row[item.text])
                          : formatterNull(scope.row[scope.column.property])
                          }}
                        </span>
                      </el-tooltip>
                      <el-checkbox
                        v-model="scope.row[scope.column.property]"
                        v-else-if="item.type ==='checkbox'"
                        :true-label="1"
                        :false-label="0"
                        @change="item.methods ? item.methods(scope.row,item) : ''"
                        :disabled="item.disabled"
                      ></el-checkbox>
                      <span v-else>
                        {{
                        item.formatter
                        ? item.formatter(
                        scope.row[scope.column.property],
                        scope.row
                        )
                        : item.text
                        ? formatterNull(scope.row[item.text])
                        : formatterNull(scope.row[scope.column.property])
                        }}
                      </span>
                    </template>
                  </slot>
                </el-form-item>
              </template>
            </el-table-column>
          </template>
          <el-table-column
            width="140"
            align="center"
            label="操作"
            prop="operate"
            v-if="!hideBtn&&tableConfig.buttonArr.length!=0"
          >
            <template slot-scope="scope">
              <template v-for="(btnItem, btnIndex) in tableConfig.buttonArr">
                <el-button
                  type="text"
                  size="small"
                  :key="btnIndex"
                  :icon="btnItem.icon"
                  v-if="btnItem.isShow(scope.row, scope.$index)"
                  @click="() => btnItem.methods(scope.row, scope.$index)"
                >{{ btnItem.name }}</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <dialogPublic
        :title="dialogTitle"
        :show.sync="show"
        @doSubmit="addSeleteMember"
        @doClose="() => (show = false)"
      >
        <orgMemberSelect
          ref="orgMemberSelect"
          v-if="show"
          :otherInfo="formData"
          :seleteSetting="orgMemberSelect"
        ></orgMemberSelect>
      </dialogPublic>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    tableSetting: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    hideBtn: {
      type: Boolean,
      default: false
    },
    stripe: {
      type: Boolean,
      default: false
    },
    rowKey: {
      type: String,
      default: "id"
    },
    showOrder: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: "表格标题",
      dialogTitle: "信息选择",
      tableConfig: {
        select: true,
        data: [],
        column: [],
        buttonArr: []
      },
      btnConfig: [
        {
          name: "add",
          text: "新增",
          icon: "el-icon-circle-plus-outline",
          type: "success",
          methons: () => {
            this.add();
          }
        },
        {
          name: "edit",
          text: "编辑",
          icon: "el-icon-edit-outline",
          type: "primary",
          methons: () => {
            this.edit();
          }
        }
      ],
      //操作栏按钮
      btnArr: [],
      //组织树选择人员
      orgMemberSelect: {
        seleteType: "orgmember",
        props: {
          label: "organizationName",
          children: "children"
        },
        chosedData: []
      },
      show: false,
      deptItem: {},
      rules: {},
      currentItem: null,
      currentRow: null,
      formConfig: {}
    };
  },
  computed: {
    rowProp() {
      let row = new Object();
      this.tableConfig.column.map(i => {
        row[i.prop] = "";
      });
      return row;
    }
  },

  watch: {
    "tableSetting.maxHeight"() {
      this.tableConfig.maxHeight = this.tableSetting.maxHeight;
    },
    "tableSetting.title"() {
      this.title = this.tableSetting.title;
    },
    "tableSetting.data": {
      handler(val) {
        this.tableConfig.data = val;
      },
      deep: true
    },
    "tableConfig.data": {
      handler(val) {
        this.$emit("changeTableData", val);
      },
      deep: true
    },
    tableData: {
      handler(val) {
        if (val.length > 0) {
          this.setTableData(val);
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.init();
  },
  mounted() {
    this.setTableHeight();
  },
  methods: {
    init() {
      let {
        btnArr,
        column,
        title,
        data,
        select,
        maxHeight,
        height,
        buttonArr
      } = this.tableSetting;
      this.btnArr = btnArr || [];
      this.title = title || "";
      this.tableConfig.column = column || [];
      /* 优先tableData里面的值 */
      if (this.tableData.length > 0) {
        this.tableConfig.data = this.tableData;
      } else {
        this.tableConfig.data = data || [];
      }
      this.tableConfig.select = select;
      this.tableConfig.maxHeight = maxHeight;
      this.tableConfig.height = height;
      this.tableConfig.buttonArr = buttonArr || [];
      this.tableConfig.data.map((i, index) => {
        i.rowIndex = index;
        // i.editable = false;
      });
      let rules = {};
      this.tableConfig.column.map(i => {
        if (i.required) {
          rules[i.prop] = [];
          let message = "";
          if (i.type === "text" || i.type === "textarea") {
            message = `请输入`;
          } else {
            message = `请选择`;
          }
          rules[i.prop].push({
            required: true,
            message: message + i.label,
            trigger: i.trigger || "blur"
          });
          if (i.rules) {
            rules[i.prop].push(i.rules);
          }
        }
      });
      this.rules = Object.assign({}, rules);
    },
    headerStyle() {
      return {
        borderRight: "none"
      };
    },
    showBtn(btn) {
      return this.btnArr.indexOf(btn) != -1;
    },
    //日期数据处理
    dateFrm(type) {
      if (type === "date" || type === "daterange") {
        return "yyyy-MM-dd";
      } else if (type == "datetime" || type === "datetimerange") {
        return "yyyy-MM-dd HH:mm";
      } else if (type == "month") {
        return "yyyy-MM";
      } else if (type == "year") {
        return "yyyy";
      } else {
        return "";
      }
    },
    //点击新增
    add() {
      let len = this.tableConfig.data.length;
      let rowIndex = 0;
      if (len) {
        rowIndex = this.tableConfig.data[len - 1].rowIndex + 1;
      }
      let nRow = Object.assign(
        {},
        { rowIndex: rowIndex, editable: true, isChange: false },
        this.rowProp
      );

      if (this.tableSetting.addMethons) {
        this.$emit(
          "handleClickAdd",
          nRow,
          JSON.parse(JSON.stringify(this.tableConfig.data))
        );
      } else {
        //如果没有外部新增方法，则新增一行
        this.tableConfig.data.push(nRow);
      }
    },
    //编辑表格
    edit() {
      this.tableConfig.data.forEach(item => {
        item.editable = true;
      });
    },
    //返回表单数据
    getFormData() {
      let { data } = this.tableConfig;
      return data;
    },
    //获取表格数据
    getTableData(needValid = true) {
      return new Promise((resolve, reject) => {
        let { data } = this.tableConfig;
        data = JSON.parse(JSON.stringify(data));
        data.forEach(i => {
          delete i.rowIndex;
          delete i.editable;
        });
        if (!needValid) {
          resolve(data);
          return;
        }
        this.$refs.formTable.validate(valid => {
          if (valid) {
            resolve(data);
          } else {
            reject("列表未填写完整");
          }
        });
      });
    },
    //设置表单数据
    setTableData(data) {
      data = JSON.parse(JSON.stringify(data));
      data.map((i, index) => (i.rowIndex = index));
      this.$set(this.tableConfig, "data", [...data]);
    },
    //追加data
    pushData(data) {
      let arr = [...data];
      arr.map(i => {
        this.tableConfig.data.push(i);
      });
    },
    //下拉框选择
    changeSelete(val, item, row) {
      let option = item.seleteOption;
      if (item.text) {
        let type = typeof val;
        let valText = "";
        let arr = [];
        if (type == "string") {
          arr = option.filter(i => i.value == val);
        } else {
          arr = [...option].filter(x => [...val].some(y => x.value == y));
        }
        if (arr) {
          arr = arr.map(i => {
            return i.label;
          });
          valText = arr.join();
        }
        row[item.text] = valText;
      }
      if (item.methods) {
        item.methods(val, row);
      }
    },
    //选择组织人员
    goSeleteOrgMember(row, item, type) {
      this.currentItem = item;
      this.currentRow = row;
      let value = row[item.prop] || "";
      let ids = row[item.idsStr] || "";

      let arr = value ? value.split(",") : [];
      let idsArr = ids ? ids.split(",") : [];

      let chosedData = [];
      let typePre = type.split("-")[0];
      let typeBre = type.split("-")[1];
      if (typeBre == "select") {
        typeBre = "";
      }
      if (typePre == "dept") {
        this.dialogTitle = "选择组织";
        this.orgMemberSelect = {
          seleteType: typeBre ? typeBre : "org",
          radio: !item.multiple, //单选还是多选
          outOrg: item.isOutOrg === undefined ? "" : item.isOutOrg, //是否是外单位
          props: {
            label: "name",
            children: "children"
          },
          column: [
            {
              label: "组织",
              prop: "name"
            }
          ],
          chosedData: []
        };
        arr.map((i, index) => {
          let obj = {};
          obj.id = idsArr[index];
          obj[this.orgMemberSelect.column[0].prop] = arr[index];
          chosedData.push(obj);
        });
      } else if (typePre == "user") {
        this.dialogTitle = "选择人员";
        this.orgMemberSelect = {
          seleteType: typeBre ? typeBre : "orgmember",
          radio: !item.multiple, //单选还是多选
          outOrg: item.isOutOrg === undefined ? "" : item.isOutOrg, //是否是外单位
          props: {
            label: "name",
            children: "children"
          },
          column: [
            {
              label: "用户名",
              prop: "name",
              width: 60
            },
            {
              label: "电话",
              prop: "phone",
              width: 100
            }
          ],
          chosedData: []
        };

        let deptCode = item.deptCodeStr
          ? this.editFormData[item.deptCodeStr] || ""
          : ""; //部门code
        let deptName = item.deptStr
          ? this.editFormData[item.deptStr] || ""
          : ""; //部门名称
        let phone = item.phoneStr ? this.editFormData[item.phoneStr] || "" : ""; //手机号
        let deptCodeArr = deptCode ? deptCode.split(",") : [];
        let deptNameArr = deptName ? deptName.split(",") : [];
        let phoneArr = phone ? phone.split(",") : [];
        arr.map((i, index) => {
          let obj = {};
          obj.id = idsArr[index];

          obj.deptCode = deptCodeArr[index] || "";
          obj.deptName = deptNameArr[index] || "";
          obj.phone = phoneArr[index] || "";

          obj[this.orgMemberSelect.column[0].prop] = arr[index];
          chosedData.push(obj);
        });
      } else if (type == "deviceClassify") {
        //选设备分类
        this.dialogTitle = "选设备分类";
        this.orgMemberSelect = {
          seleteType: "deviceClassify",
          radio: !item.multiple,
          props: {
            label: "name",
            children: "children"
          },
          column: [
            {
              label: "分类名称",
              prop: "name"
            }
          ],
          chosedData: []
        };

        arr.map((i, index) => {
          let obj = {};
          obj.id = idsArr[index];
          obj[this.orgMemberSelect.column[0].prop] = arr[index];
          chosedData.push(obj);
        });
      } else if (type == "device") {
        //选设备
        this.dialogTitle = "选择设备";
        this.orgMemberSelect = {
          seleteType: "device",
          radio: !item.multiple,
          props: {
            label: "name",
            children: "children"
          },
          column: [
            {
              label: "设备名称",
              prop: "name"
            }
          ],
          chosedData: []
        };

        arr.map((i, index) => {
          let obj = {};
          obj.id = idsArr[index];
          obj[this.orgMemberSelect.column[0].prop] = arr[index];
          chosedData.push(obj);
        });
      } else if (typePre == "location") {
        //选位置
        this.dialogTitle = "选择位置";
        this.orgMemberSelect = {
          seleteType: "location",
          radio: !item.multiple,
          props: {
            label: "name",
            children: "children"
          },
          column: [
            {
              label: "位置名称",
              prop: "name"
            }
          ],
          chosedData: []
        };
        arr.map((i, index) => {
          let obj = {};
          obj.id = idsArr[index];
          obj[this.orgMemberSelect.column[0].prop] = arr[index];
          chosedData.push(obj);
        });
      }
      this.orgMemberSelect.chosedData = chosedData;
      this.dialogType = type;
      this.show = true;
    },
    //确定选择
    addSeleteMember() {
      let data = this.$refs.orgMemberSelect.getSeleteData();
      //把数据同步到输入查询
      data.map(i => {
        i.label = i.name;
        i.value = i.id;
      });
      if (
        ["dept-select", "user-select", "location-select"].includes(
          this.dialogType
        )
      ) {
        this.setConfigArrOption(this.currentItem, data);
      }
      let names = "";
      let ids = "";
      let idsArr = [];
      if (data) {
        names = data
          .map(i => {
            return i[this.orgMemberSelect.column[0].prop];
          })
          .join();
        ids = data
          .map(i => {
            idsArr.push(i.id);
            return i.id;
          })
          .join();
      }
      if (this.currentItem.propArr) {
        if (this.currentItem.multiple) {
          //多选
          this.currentRow[this.currentItem.propArr] = idsArr;
          //this.setFormItem(this.currentItem.propArr, idsArr);
        } else {
          //单选
          this.currentRow[this.currentItem.propArr] = idsArr[0];
          //this.setFormItem(this.currentItem.propArr, idsArr[0]);
        }
      }
      if (this.currentItem.idsStr) {
        this.currentRow[this.currentItem.idsStr] = ids;
        //this.$set(this.editFormData, this.currentItem.idsStr, ids);
      }
      this.currentRow[this.currentItem.prop] = names;
      //this.$set(this.editFormData, this.currentItem.prop, names);
      this.show = false;
      if (this.currentItem.methods) {
        this.currentItem.methods(data, this.currentRow);
      }
    },
    //值改变事件（除下拉框）
    inputChange(val, item, row) {
      if (item.methods) {
        item.methods(val, row);
      }
    },
    //输入框搜索输入时触发
    querySearchAsync(item) {
      return (queryString, cb) => {
        var restaurants = item.selectOption.map(i => {
          return { ...i };
        });
        var results = queryString
          ? restaurants.filter(this.createStateFilter(queryString))
          : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 500 * Math.random());
      };
    },
    /**判断空值默认- */
    formatterNull(text) {
      if (text === null || text === undefined || text === "") {
        return "-";
      } else {
        return text;
      }
    },
    /**修改表格默认值 */
    setDefalutData(form) {
      this.tableConfig.data.map((i, index) => {
        let obj = Object.assign({}, i, form);
        this.$set(this.tableConfig.data, index, obj);
      });
    },
    /**禁止输入框滚动事件 */
    stopScrollFun(evt, type) {
      if (type !== "number") {
        return true;
      }
      evt = evt || window.event;
      if (evt.preventDefault) {
        // Firefox
        evt.preventDefault();
        evt.stopPropagation();
      } else {
        // IE
        evt.cancelBubble = true;
        evt.returnValue = false;
      }
      return false;
    },
    /**设置最大高度 */
    setTableHeight() {
      let { height, maxHeight, autoHeight } = this.tableSetting;
      if (!height && !maxHeight && !autoHeight) {
        let parentH = this.$refs.editTableBox.parentElement.clientHeight;
        parentH = parentH - 68;
        this.tableConfig.height = parentH < 300 ? 300 : parentH;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.editTableExpand {
  /deep/.el-form {
    .el-form-item {
      .el-form-item__content {
        line-height: 40px;
        position: relative;
        font-size: 14px;
        .el-textarea {
          display: block;
        }
      }
    }
  }
  margin-bottom: 10px;
  .el-form-item__content {
    font-size: 12px;
    line-height: 20px;
    white-space: pre-wrap;
    display: inline-block;
  }
  .el-button--primary {
    background-color: @kr-main-color;
    border-color: @kr-main-color;
  }
  /deep/.el-checkbox__inner {
    width: 20px;
    height: 20px;
  }
  /deep/.el-checkbox__inner::after {
    height: 10px;
    left: 7px;
    width: 4px;
  }
  /deep/.cell .el-form-item {
    display: inline-block;
  }
  .unfoldColimn {
    display: flex;
    flex-flow: wrap nowrap;
  }
}
.edit-table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.edit-table-toolbar__title {
  font-weight: bold;
  margin-left: 10px;
}
.table-cloumn__span--tooltip {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>